import Title from '../../components/title/title1.jsx'
import Scroll from '../../baseUI/scroll'
import './detail.less'
// import Commonts from '../../components/info/Commonts.jsx'
import React, { memo, useState, useEffect, createContext, useRef } from "react";
import { connect } from "react-redux";
import { useHistory } from "react-router-dom";
import * as actionTypes from '../Info/store/actionCreators'
import moment from 'moment'
import * as api from '@/api'
import tou from '../../assets/images/头像.png'
import friends from '../../assets/images/friends.png'
import two from '../../assets/images/二手车.png'
import { loadCollection, db } from './database'
import {
    Input,
    // Button,
} from 'antd';
import 'antd/dist/antd.css'
// import { CopyOutlined } from '@ant-design/icons';


moment.locale('zh-cn', {
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
    longDateFormat: {
        LT: 'HH:mm',
        LTS: 'HH:mm:ss',
        L: 'YYYY-MM-DD',
        LL: 'YYYY年MM月DD日',
        LLL: 'YYYY年MM月DD日Ah点mm分',
        LLLL: 'YYYY年MM月DD日ddddAh点mm分',
        l: 'YYYY-M-D',
        ll: 'YYYY年M月D日',
        lll: 'YYYY年M月D日 HH:mm',
        llll: 'YYYY年M月D日dddd HH:mm'
    },
    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
    meridiemHour: function (hour, meridiem) {
        if (hour === 12) {
            hour = 0;
        }
        if (meridiem === '凌晨' || meridiem === '早上' ||
            meridiem === '上午') {
            return hour;
        } else if (meridiem === '下午' || meridiem === '晚上') {
            return hour + 12;
        } else {
            // '中午'
            return hour >= 11 ? hour : hour + 12;
        }
    },
    meridiem: function (hour, minute, isLower) {
        const hm = hour * 100 + minute;
        if (hm < 600) {
            return '凌晨';
        } else if (hm < 900) {
            return '早上';
        } else if (hm < 1130) {
            return '上午';
        } else if (hm < 1230) {
            return '中午';
        } else if (hm < 1800) {
            return '下午';
        } else {
            return '晚上';
        }
    },
    calendar: {
        sameDay: '[今天]LT',
        nextDay: '[明天]LT',
        nextWeek: '[下]ddddLT',
        lastDay: '[昨天]LT',
        lastWeek: '[上]ddddLT',
        sameElse: 'L'
    },
    dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
    ordinal: function (number, period) {
        switch (period) {
            case 'd':
            case 'D':
            case 'DDD':
                return number + '日';
            case 'M':
                return number + '月';
            case 'w':
            case 'W':
                return number + '周';
            default:
                return number;
        }
    },
    relativeTime: {
        future: '%s内',
        past: '%s前',
        s: '几秒',
        ss: '%d秒',
        m: '1分钟',
        mm: '%d分钟',
        h: '1小时',
        hh: '%d小时',
        d: '1天',
        dd: '%d天',
        M: '1个月',
        MM: '%d个月',
        y: '1年',
        yy: '%d年'
    },
    week: {
        // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
        dow: 1, // Monday is the first day of the week.
        doy: 4  // The week that contains Jan 4th is the first week of the year.
    }
})

// 上拉加载更多
const handlePullUp = () => {
    console.log('上拉加载更多');
}
// 下拉刷新

const handlePullDown = () => {
    console.log('下拉刷新');
}

const Detail = (props) => {
    const [data, setData] = useState([])
    const [sentence1, setSentence1] = useState("")
    useEffect(() => {
        loadCollection('comments')
            .then((collection) => {
                const entities = collection.chain()
                    .find()
                    .simplesort('$loki', 'isdesc')
                    .data()
                // console.log(entities);
                setData(entities);
                // console.log();

            })

    }, [])
    const input2 = useRef(null)
    const change2 = (event) => {
        let sentence = input2.current.input.value
        console.log(sentence)
        setSentence1(sentence)
    }
    // console.log(sentence1, '000000000');

    const createComment = (e) => {
        e.preventDefault();
        loadCollection('comments')
            .then((collection) => {
                collection.insert([
                    {
                        body: sentence1
                    }
                ])
            })
        input2.current.input.value = ''
        window.location.href = `/${id}`
    }





    const [commontmain, setCommontmain] = useState({})
    console.log(props, 'props......');
    const { commontslist, history, getCommontsDispatch } = props
    // console.log(history.location.pathname,'history');
    let id = history.location.pathname.replace(/[^0-9]/ig, "")
    // console.log(id,'id');
    // console.log(commontslist,'commontslist');
    // commontslist[1].list1[0].id
    // console.log(commontslist[1].list1[0].id,'commontslist[1].list1[0].id');
    const info = [];
    console.log(info, 'info++++++++++++++++++');
    if (commontslist.length > 0) {
        console.log('进去了');
        console.log(commontslist, 'commontslist');
        // console.log(typeof id, 'id');
        commontslist.map((commontslist) => {
            commontslist.list1.map(item => {
                if (item.id == id) {
                    console.log(item, 'item');
                    console.log(id, 'id');
                    info.push(item)
                    return
                }
            })
        })
    } else {
        console.log('没进去');
    }
    console.log(info, 'info++++++++++++++++++');

    useEffect(() => {
        getCommontsDispatch()
    }, [])

    const [commontsindex, setCommontsindex] = useState(1)
    // let arr = new Array(5).fill(0);
    let arr = [0, 0, 0, 0, 0, 0]
    return (
        <>
            <div className="main1234">
                <Title />
                <Scroll
                    direction={"vertical"}

                    refresh={false}
                    onScroll={
                        (e) => {

                        }
                        // forceCheck()

                    }
                    pullUp={handlePullUp}
                    pullDown={handlePullDown} >
                    {info.length > 0 ? <div className='main1'>
                        <div className='commonts-all' >

                            <div className="commonts-header">

                                <div className="header-info">
                                    <div className="info-img">
                                        <img src={tou} alt="" />
                                    </div>
                                    <div className="info-all">
                                        <div className='info-username'>{info[0].writer}</div>
                                        <div className="info-time">{info[0].time}</div>
                                    </div>
                                </div>
                            </div>


                            <div className="commonts-main">
                                <div className="commonts-main-text">
                                    {info[0].text}
                                </div>
                                <div className="main-img">
                                    <div className="img-big">
                                        <img src={tou} alt="" />
                                    </div>
                                    <div className="img-small">
                                        <div className="img1">
                                            <img src={tou} alt="" />
                                        </div>
                                        <div className='log'> </div>
                                        <div className="img1">
                                            <img src={tou} alt="" />
                                        </div>
                                    </div>
                                </div>
                                <div className="main-video">

                                </div>

                            </div>

                            {/* <hr /> */}

                        </div>

                        <div className="range">
                            <img src={two} alt="" />
                        </div>

                        <div className="commont">
                            <div className="commont-header">
                                评论
                            </div>
                            <div className="commont-main">
                                {

                                    commontmain ? (
                                        arr.map((item, index) =>
                                        (
                                            <div className='all' key={index}>
                                                <div className='all-commont' >评论{index + 1}</div>
                                                <div className='all-time'>时间{index + 1}</div>
                                            </div>
                                        ))



                                    ) : (<div>暂无评论1111</div>)
                                }
                            </div>
                            {
                                data.map((item, index) => {
                                    return (
                                        <div className='all1' key={index}>
                                            <div className='all-commont1'> {item.body}</div>
                                            <div className='all-time1'> {moment(item.meta.created).fromNow()}</div>
                                            {/* {item.meta.created} */}
                                        </div>
                                    )
                                })
                            }
                            <hr style={{ opacity: "0.5" }} />
                            <div className="commont-button">
                                <div className="button">
                                    <Input ref={input2} type="text" onChange={change2} placeholder="Sentence" ></Input>
                                </div>
                                <button className='add' onClick={createComment}  >添加</button>
                            </div>
                        </div>

                        <div className="guesslike">
                            <div className='like-header' >
                                <div className="header-text">
                                    相关推荐
                                </div>
                            </div>
                            <div className="main-box">
                                <div className="like-main">
                                    <div className="main-all">
                                        <div className="main-img">
                                            <img src={tou} alt="" />
                                        </div>
                                        <div className="main-text">
                                            高速发动机咆哮
                                        </div>
                                    </div>
                                </div>
                                <div className="like-main">
                                    <div className="main-all">
                                        <div className="main-img">
                                            <img src={tou} alt="" />
                                        </div>
                                        <div className="main-text">
                                            高速发动机咆哮
                                            高速发动机咆哮
                                            高速发动机咆哮
                                            高速发动机咆哮
                                            高速发动机咆哮
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div> : <div>2</div>}
                </Scroll>
            </div >
        </>
    )
}

const mapStateToProps = (state) => {
    // console.log(state, '////');
    return {
        // infodata: state.info.infodata,
        commontslist: state.info.commontslist,
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getCommontsDispatch() {
            // console.log(actionTypes,'actionTypes');
            dispatch(actionTypes.getCommontslist())
        },
        getInfoDispatch() {
            // console.log(actionTypes, 'actionTypes');
            dispatch(actionTypes.getInfoData())
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(Detail)

// export default Detail